<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户列表</title>
    <link rel="stylesheet" href="/css/index.css" type="text/css">
    <script src="/js/vue.js"></script>
    <script src="/js/axios.min.js"></script>
    <script src="/js/qs.min.js"></script>
    <script src="/js/index.js"></script>
</head>
<body>
<div id="app">
<!--     模糊查询-->
<el-input v-model="name"  placeholder="请输入员工姓名" style="width: 280px"></el-input>
<el-select v-model="value" placeholder="请选择" clearable >
    <el-option
            v-for="item in staffs"
            :key="item.tdp.id"
            :label="item.tdp.name"
            :value="item.tdp.id">
    </el-option>
</el-select>
<el-button type="primary" icon="el-icon-search" @click="chaxun">查询</el-button><br>
<el-button type="primary" @click="check">查询所有</el-button>

<!--查询员工-->
<el-dialog title="更新员工" :visible.sync="dialogRoleFormVisible" @close="closeDialog">
    <el-form :model="staff">
        <el-form-item label="登录账号">
            <el-input v-model="staff.loginAccount" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="员工编号">
            <el-input v-model="staff.no" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="员工部门">
            <el-input v-model="staff.tdp.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="员工职位">
            <el-input v-model="staff.tposts.pname" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="员工入职时间">
            <!--                <el-input v-model="staff.entryTime" autocomplete="off"></el-input>-->
            <el-date-picker
                    v-model="staff.entryTime"
                    type="datetime"
                    placeholder="选择日期时间">
            </el-date-picker>
        </el-form-item>
        <el-form-item label="员工状态">
            <el-input v-model="staff.status" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="员工成绩">
            <el-input v-model="staff.grade" autocomplete="off"></el-input>
        </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="saveStaff">确 定</el-button>
    </div>
</el-dialog>

<!--    用户信息详情-->
<el-table
        ref="multipleTable"
        :data="staffs"
        style="width: 100%">
    <el-table-column
            label="员工编号">
        <template slot-scope="scope">
            <sidpan style="margin-left: 10px">{{ scope.row.no }}</sidpan>
        </template>
    </el-table-column>
    <el-table-column
            label="员工姓名">
        <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.name }}</span>
        </template>
    </el-table-column>
    <el-table-column
            label="员工账号">
        <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.loginAccount }}</span>
        </template>
    </el-table-column>
    <el-table-column
            label="职位">
        <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.tposts.pname }}</span>
        </template>
    </el-table-column>
    <el-table-column
            label="所属部门">
        <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.tdp.name }}</span>
        </template>
    </el-table-column>
    <el-table-column
            label="员工成绩">
        <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.grade }}</span>
        </template>
    </el-table-column>
    <el-table-column
            label="入职时间">
        <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.entryTime }}</span>
        </template>
    </el-table-column>
    <el-table-column
            label="员工状态">
        <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.status }}</span>
        </template>
    </el-table-column>
    <el-table-column
            label="账号状态"
            width="180">
        <template slot-scope="scope">
            <el-switch
                    v-model="scope.row.accountStatus"
                    active-color="#13ce66"
                    inactive-color="#ff4949"
                    @change="statusMe(scope.row)">
            </el-switch>
        </template>
    </el-table-column>
    <el-table-column label="操作">
        <template slot-scope="scope">
            <el-button
                    size="mini"
                    @click="handleEdit(scope.$index, scope.row)">编辑
            </el-button>
            <el-button
                    size="mini"
                    type="danger"
                    @click="handleDelete(scope.$index, scope.row)">删除
            </el-button>
        </template>
    </el-table-column>
</el-table>
<el-pagination
        background
        layout="prev, pager, next"
        :total="total"
        :page-size="pageSize"
        :current-page="current"
        @current-change="loadStaffs">
</el-pagination>
</div>




<script>
    new Vue({
        el:"#app",
        data:{
            staffs:[],
            tDps:[],
            tPost:[],
            staff:{id:0,tdp:{name:''},tposts:{pname:''}},
            total: 0,
            current: 0,
            pageSize: 10,
            dialogFormVisible:false,
            dialogRoleFormVisible:false,
            name:null,
            value:null,




        },

        methods: {
            loadStaffs(current) {
                axios.get("/tStaffs/page?current=" + current)
                    .then(res => {
                        console.log(res.data)
                        this.staffs = res.data.data;
                        this.total = res.data.current;
                        this.current = res.data.total;
                        this.staffs.forEach(re=>{
                            if(re.accountStatus=="1"){
                                re.accountStatus=true
                            }else {
                                re.accountStatus=false
                            }
                        })

                    });


            },


            chaxun(){
                console.log(this.value)
                if (this.value==null|| this.value==''){
                    this.value =0
                }
                if(this.name==""){
                    this.name =null
                }
                axios.get("/tStaffLike/like/"+this.current+"/"+this.pageSize+"/"+this.name+"/"+this.value)
                .then(res => {
                    this.staffs = res.data.records;
                    this.total = res.data.current;
                    this.current = res.data.total;
                });
            },

            handleDelete(index,row){
                axios.delete("/tStaff/"+row.id)
                    .then(res=>{
                        if (res.data==="ok"){
                            this.$message("删除员工成功！")
                            this.loadStaffs(1);
                        }
                    })

            },


            handleEdit(index, row){
                this.staff =JSON.parse(JSON.stringify(row));
                this.dialogRoleFormVisible=true;
            },



            closeDialog(){
                this.dialogRoleFormVisible=false;
            },
            saveStaff() {
                let staff = JSON.parse(JSON.stringify(this.staff));
                if (staff.id !== 0) {
                    axios.put("/tStaff",staff)
                        .then(res => {
                            if (res.data === "ok") {
                                this.dialogRoleFormVisible = false;
                                this.$message("修改员工成功！");
                                this.loadStaffs(1);
                            }
                        })
                }
            },
            statusMe(row) {
                if(row.accountStatus){
                    row.accountStatus="1"
                }else {
                    row.accountStatus="-1"
                }
                axios.get("/tStaff/"+row.id+"/"+row.accountStatus).then(res=>{
                    this.loadStaffs(1);
                })

            },




            check(){
                this.loadStaffs(1)
            }



        },

        mounted(){
            this.loadStaffs(1);
        }
    })

</script>

</body>
</html>